<template>
  <div
    class="toast-container"
    :class="{ 'toast-enter': isShow, 'toast-leave': !isShow }"
  >
    <div class="toast-content">
      <img v-if="type === 'success'" src="/images/icon-success.png"/>
      <img v-if="type === 'error'" src="/images/icon-error.png"/>

      <span>{{ message }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  message: string
  type?: 'success' | 'error' | 'info'
  duration?: number
  onClose?: () => void
}>()

const isShow = ref(false)

onMounted(() => {
  isShow.value = true
  setTimeout(() => {
    isShow.value = false
    setTimeout(() => {
      props.onClose?.()
    }, 300)
  }, props.duration || 2000)
})
</script>

<style scoped lang="scss">
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 20px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.toast-enter {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.toast-leave {
  opacity: 0;
  transform: translate(-50%, -60%);
}


.toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  >img{
    width: 21px;
    height: 21px;
  }
}
</style>
